<template>
  <div style="padding: 40px">

    <el-table :data="filteredData" border stripe style="width: 100%;" header-align="center" align="center">
      <el-table-column label="失物ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="发布者姓名" header-align="center" align="center" v-if="userRole === 'admin' || userRole === 'student'" />
      <el-table-column prop="title" label="丢失物品名称" header-align="center" align="center"/>
      <el-table-column prop="location" label="丢失地点" header-align="center" align="center"/>
      <el-table-column prop="contact" label="联系方式" header-align="center" align="center"/>
      <el-table-column prop="description" label="物品描述" header-align="center" align="center"/>
      <el-table-column prop="postDate" label="发布时间" :formatter="formatMeetingTime" header-align="center" align="center"/>
      <el-table-column prop="status" label="物品状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'found' ? 'success' : 'warning'">
            {{ scope.row.status === 'found' ? '已归还' : '未归还' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100px" header-align="center" align="center"  v-if="userRole === 'admin'">
        <template #default="scope">


          <!-- 删除按钮 -->
          <el-popconfirm  v-if="userRole === 'admin'" title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="创建失物招领" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="物品名称">
          <el-input v-model="form.title" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="form.location" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.contact" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="更新" width="30%">

      <el-form :model="form" label-width="120px">

        <el-form-item label="丢失物品名称">
          <el-input v-model="form.title" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="丢失地点">
          <el-input v-model="form.location" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="物品状态">
          <el-select v-model="form.status" style="width: 50%">
            <el-option label="Lost" value="lost"></el-option>
            <el-option label="Found" value="found"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.contact" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="物品描述">
          <el-input v-model="form.description" style="width: 50%"></el-input>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>

    </el-dialog>
    <!--  分页器-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {
  getMinioUpload,
  getGuanGreadeAll,
  getGuanUpDatereade, getGuanUpGread, getGradeExport, getGuanUpDataClass, getStudentQingAdd, getCreateUpDataClass
} from '@/http/userList.js'
import {getGuanDeleteGreade,} from "@/http/user";
import moment from "moment/moment";

export default {
  name: "Notice",

  data() {
    return {
      form: {
        status: '' // 初始状态为空
      },
      form1: {
        "comment": "",
        "gradeId": 0,
        "gradeType": "",
        "score": ""
      },
      searchKeyword: '', // 添加搜索关键字
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],

    }

  },
  created() {
    this.load()
  },

  methods: {
    handleChange(value) {
      // 设置新的选择值
      this.form.status = value;
    },
    deleteStatus() {
      // 清除原有数据
      this.form.status = '';
    },
    formatMeetingTime(row) {
      return moment(row.postDate).format('YYYY-MM-DD HH:mm:ss'); // 根据需要调整格式
    },

    async load() {
      const { code, message, data } = await getGuanGreadeAll({
        current: this.currentPage, size: this.pageSize
      })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)

    },


    async handleDelete(id) {
      console.log("id");
      const { code, message } = await getGuanDeleteGreade({ id:id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getGuanGreadeAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },

    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    },
  },


  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    }),
    filteredData() {
      if (!this.searchKeyword) {
        return this.tableData;
      }
      return this.tableData.filter(item =>
          item.productName.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    }
  }

}
</script>

<style></style>
